<template>
	<view>
		<view class="banner">
			<image :src="banner"></image>
			<view class="return" @click="toReturn()">
				<u-icon name="arrow-left" size="20"></u-icon>
			</view>
			<view class="search uni-margin-wrap">
				<u-search bgColor="RGBA(255, 255, 255, 0.7)" placeholder="输入搜索内容" :showAction="false" v-model="keyword"
					@change="toSearch()"></u-search>
			</view>
		</view>
		<view class="main">
			<view class="flex align navs">
				<view :class="act==3?'nav-item active':'nav-item'" @click="toAct(3)">星级绿色酒店
					<view></view>
				</view>
				<view :class="act==1?'nav-item active active3':'nav-item'" @click="toAct(1)">精品酒店
					<view></view>
				</view>
				<view :class="act==2?'nav-item active active2':'nav-item'" @click="toAct(2)">甄选民宿
					<view></view>
				</view>
			</view>
			<!-- 			<view class="gonglue flex between wrap" v-if="act==1">
				<view class="gongList" v-for="(item,index) in list" :key="index">
					<view class="image">
						<image src="/static/banner.png" mode="aspectFill"></image>
						<view class="name flex align">
							{{item.type_text}}</view>
					</view>
					<view class="infos">
						<view class="title">{{item.name}}</view>
						<view class="tags flex align wrap">
							<view v-for="(item2,index) in item.tags" :key="index">{{item2}}</view>
						</view>
						<view class="price">￥256<text>起</text></view>
					</view>
				</view>
			</view> -->
			<view class="gonglue">
				<navigator hover-class="none" :url="'/pages/hotel/detail/detail?id='+item.id" class="gongList gongList2"
					v-for="(item,index) in list" :key="index">
					<view class="image">
						<image :src="item.cover" mode="aspectFill"></image>
						<view class="name flex align">
							<!-- <u-icon name="map-fill" color="#FFFFFF"></u-icon> -->
							{{item.name}}
						</view>
					</view>
					<view class="infos">
						<view class="title">{{item.name}}</view>
						<view class="tags flex align wrap">
							<view v-for="(item2,index) in item.tags" :key="index">{{item2}}</view>
						</view>
						<view class="price flex align">
							<u-icon name="map-fill" color="#848484"></u-icon>
							{{item.address}}
						</view>
					</view>
				</navigator>
			</view>
			<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
		</view>
		<!-- 返回顶部按钮 -->
		<view class="back-to-top" v-if="showBack" @click="handleTop">
			<image src="/static/top.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		hotelList,
		positionDetail
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				keyword: '',
				act: 3,
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				category_id: 1,
				banner: '',
				showBack: false,
				ws: null,
				path: '/pages/hotel/hotel'
			};
		},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
			// 监听页面滚动事件
			if (e.scrollTop >= 100) {
				this.showBack = true; // 滚动距离超过100px时显示返回顶部按钮
			} else {
				this.showBack = false; // 否则隐藏返回顶部按钮
			}
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		onLoad() {
			this.getlist()
			this.getBanner()
		},
		onShow() {
			this.connectWebSocket()
		},
		onShareAppMessage(){
			
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				uni.connectSocket({
					url: wsUrl,
					success: function(res) {
						console.log('WebSocket连接成功');
						that.sendData({
							type: 'page_enter',
							path: that.path,
							params: ""
						});
					},
					fail: function(err) {
						console.error('WebSocket连接失败', err);
					}
				});
			},
			// 发送
			sendData(data) {
				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: function(res) {
						console.log('消息发送成功');
					},
					fail: function(err) {
						console.error('消息发送失败', err);
					}
				});
			},
			handleTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面顶部
					duration: 300 // 滚动动画持续时间，单位为毫秒
				});
			},
			toReturn() {
				uni.navigateBack()
			},
			toAct(e) {
				this.act = e
				this.page = 0
				this.list = []
				this.getlist()
			},
			toSearch() {
				this.page = 0
				this.list = []
				this.getlist()
			},
			distance(la1, lo1, la2, lo2) {
				var La1 = (la1 * Math.PI) / 180.0
				var La2 = (la2 * Math.PI) / 180.0
				var La3 = La1 - La2
				var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
				var s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(La3 / 2), 2) +
							Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
						)
					)
				s = s * 6378.137
				s = Math.round(s * 10000) / 10000
				s = s.toFixed(2)
				return s
			},
			async getBanner() {
				const result = await positionDetail({
					position_id: 11
				})
				if (result.code == 1) {
					this.banner = result.data.path
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					category_id,
					keyword,
					act
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					type_id: act,
					name: keyword
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await hotelList(obj);
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						that.totalPage = Math.ceil(result.data.total / offset);
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		position: relative;

		image {
			width: 100%;
			height: 500rpx;
		}

		.search {
			position: absolute;
			width: 94%;
			left: 3%;
			top: 200rpx;
		}

	}

	.main {
		position: relative;
		top: -110rpx;
		border-radius: 24rpx 24rpx 0 0;

		.navs {
			border-radius: 24rpx 24rpx 0 0;
			width: 100%;
			background: rgba(255, 255, 255, 0.473);

			.nav-item {
				width: 100%;
				text-align: center;
				padding: 30rpx 0;
			}

			.active {
				background: white;
				position: relative;
				border-radius: 24rpx 0rpx 0rpx 0;
				z-index: 2;

				view {
					position: absolute;
					bottom: 30rpx;
					background: #12D5B4;
					width: 80rpx;
					height: 18rpx;
					border-radius: 14rpx;
					left: 50%;
					margin-left: -40rpx;
					z-index: -1;
				}
			}

			.active2 {
				border-radius: 0rpx 24rpx 0rpx 0;
			}

			.active3 {
				border-radius: 0;
			}

		}

		.gonglue {
			position: relative;
			margin: 30rpx;

			.tags {
				margin-top: 10rpx;

				view {
					background: #DAF5EF;
					border-radius: 8rpx;
					color: #00AF91;
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.gongList {
				border-radius: 16rpx;
				width: 336rpx;
				margin-bottom: 20rpx;
				box-shadow: 1rpx 2rpx 10rpx 2rpx gainsboro;

				.image {
					position: relative;

					image {
						width: 100%;
						height: 372rpx;
						border-radius: 16rpx 16rpx 0 0;
						display: block;
					}

					.name {
						position: absolute;
						left: 16rpx;
						bottom: 16rpx;
						color: white;
						font-size: 28rpx;
						padding: 4rpx 16rpx;
						border-radius: 24rpx;
						background: #00000094;
					}
				}

				.infos {
					border-radius: 0 0 16rpx 16rpx;
					font-size: 28rpx;
					padding: 12rpx 16rpx 16rpx;
					background: white;

					.eye {
						color: #6C7A94;
						font-size: 24rpx;
						margin-top: 12rpx;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 12rpx;
						}
					}

					.price {
						color: #848484;
						font-size: 24rpx;
						// font-weight: bold;

						text {
							font-size: 20rpx;
							font-weight: initial;
						}
					}
				}

			}

			.gongList2 {
				width: 100%;
			}
		}
	}
</style>